<template>
  <el-input
    class="common-input-number"
    v-model.number="number"
    :maxlength="maxLength"
    :placeholder="placeholder"
    :disabled="disabled"
    :clearable="clearable"
    @keyup.enter.native="$emit('enter',$event)"
  >
  </el-input>
</template>

<script>
export default {
  name: 'CommonInput',
  props: {
    value: {
      type: Number
    },
    decimal: {
      type: Boolean,
      default: false
    },// 是否支持小数
    maxLength: {
      type: Number,
      default: 9
    },
    placeholder: {
      type: String
    },
    disabled: {
      type: Boolean,
      default: false
    },
    clearable: {
      type: Boolean,
      default: false
    },
  },
  computed: {
    number: {
      get: function() {
        return this.handleSpecialChar(this.value)
      },
      set: function(v) {
        let value = this.handleSpecialChar(v)
        this.$emit('input', value)
      }
    }
  },
  methods: {
    handleSpecialChar(number) {
      let str = typeof number === 'number' ? number.toString() : undefined
      if (str) {
        if (this.decimal) {
          // 支持小数
          // to do

        } else {
          // 不支持小数
          const rule = new RegExp('[^\\d]','gi')
          str = str.replace(rule, '')
        }
        return Number(str)
      } else {
        return str
      }
    }
  }
}
</script>

<style scoped lang="scss">
.common-input-number {
  width: 100px;

  ::v-deep .el-input__inner {
    text-align: left;
  }
}
</style>
